<!--
账户管理
-->
<template>
  <div>
    <el-card shadow="never" class="oper-btn-card">
      <el-input
        v-model="searchData.name"
        clearable
        style="width: 300px"
        placeholder="按账号"
      />
      <el-select v-model="searchData.type" filterable clearable placeholder="按认证方式">
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="searchData.appid"
        filterable
        remote
        reserve-keyword
        placeholder="按组册应用查询"
        :remote-method="remoteMethod"
        :loading="appLoading"
      >
        <el-option
          v-for="item in appOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" :loading="btnLoading.search" @click="btnSearch" v-has-permission="['sysAccount:list']">
        搜索
      </el-button>
      <el-button type="success" icon="el-icon-edit" @click="btnAdd" v-has-permission="['sysAccount111:add']">
        新增
      </el-button>
    </el-card>
    <div class="margin-t2">
      <vxe-toolbar>
        <template v-slot:buttons>
          <vxe-button icon="el-icon-edit" status="primary" @click="editBtn()" v-has-permission="['sysAccount:edit']">编辑</vxe-button>
          <vxe-button icon="el-icon-refresh" status="success" @click="enableBtn()" v-has-permission="['sysAccount:enable']">启用</vxe-button>
          <vxe-button icon="el-icon-refresh" status="info" @click="disableBtn()" v-has-permission="['sysAccount:disable']">禁用</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :columns="columnsData"
        :data="tableData.table"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
      />
    </div>
    <div class="clearfix">
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { findByConditions as listData } from '@/api/account/account.js'
import { findAppByEnableStatus } from '../../../api/application/application'
import { getAccountType } from '../../../api/enum/enum'

export default {
  components: {},
  mixins: [oftenuse],
  data() {
    return {
      typeOptions: getAccountType(),
      appOptions: [],
      appLoading: false,
      appLoad: false,

      columnsData: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { field: 'id', title: 'ID', width: 180, fixed: 'left', align: 'center' },
        { field: 'name', title: '账号昵称', width: 140, showOverflow: true },
        { field: 'username', title: '账号号码', width: 140, showOverflow: true },
        { field: 'type', title: '账号类型', width: 140 },
        { field: 'registerAppName', title: '注册来源', width: 70 },
        { field: 'accessLevel', title: '访问级别', width: 80, visible: false },
        { field: 'enableStatus', title: '状态', width: 60, visible: false },
        { field: 'enableStatusDesc', title: '状态', width: 60 },
        { field: 'remark', title: '备注', width: 140 },
        { field: 'createTime', title: '创建时间', width: 180 },
        { field: 'updateTime', title: '最后一次修改时间', width: 180 }

      ]
    }
  },
  created() {
    this.listData()
    this.findAppByEnableStatus()
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.appLoading = true
        setTimeout(() => {
          this.appLoading = false
          this.appOptions = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.appOptions = []
      }
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(_ => {
        this.setBtnLoading('search', false)
      })
    },
    listData() {
      this.setTableLoading('table', true)
      const params = { pageNum: this.pageInfo.current, pageSize: this.pageInfo.size }
      Object.assign(params, this.searchData)
      return listData(params).then(res => {
        this.setTableLoading('table', false)
        if (res.data.flag) {
          const { records, total } = res.data.result
          this.setTableData('table', records)
          this.pageInfo.total = parseInt(total)
        }
      })
    },
    btnAdd() {
      this.$router.push({
        name: 'sysAccountAdd'
      })
    },
    btnUpdateData(id) {
      this.$router.push({
        name: 'sysAccountEdit',
        query: { id }
      })
    },
    btnDelData(row) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.delData(row.id)
      }).catch(() => {
      })
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    },
    selectAllEvent({ checked, records }) {
      console.log(checked ? '所有勾选事件' : '所有取消事件', records)
    },
    selectChangeEvent({ checked, records }) {
      // console.log(checked ? '勾选事件' : '取消事件', records)
    },
    getSelectEvent() {
      //  const selectRecords = this.$refs.table.getCheckboxRecords()
      // console.log(selectRecords.length)
    },
    editBtn() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      if (selectRecords.length === 1) {
        const id = selectRecords[0].id
        this.btnUpdateData(id)
      } else {
        this.$notify.error({ title: '操作异常', message: '多选时不能进行编辑操作' })
      }
    },
    enableBtn() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      if (selectRecords.length < 100) {
        const ids = []
        selectRecords.forEach(item => {
          ids.push(item.id)
        })
        console.log(ids)
      } else {
        this.$notify.error({ title: '操作异常', message: '启用时，一次操作不能超过100条' })
      }
    },
    disableBtn() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      if (selectRecords.length < 100) {
        const ids = []
        selectRecords.forEach(item => {
          ids.push(item.id)
        })
        console.log(ids)
      } else {
        this.$notify.error({ title: '操作异常', message: '禁用时，一次操作不能超过100条' })
      }
    },
    findAppByEnableStatus() {
      findAppByEnableStatus({ enableStatus: 'NORMAL' }).then(res => {
        this.appLoad = true
        if (res.data.flag) {
          this.appOptions = res.data.result.map(item => {
            return { value: item.id, label: item.name }
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
